import React, { memo, useEffect } from 'react'
import { useSelector, useDispatch, shallowEqual } from 'react-redux'

import { getTopListAction } from '../../store/actionCreators'
import HYThemeHeaderRCM from "@/components/theme-header-rcm"
import HYTopRanking from "@/components/top-ranking"

import { RankingWrapper } from './style'
export default memo(function HYRecommendRanking() {


  const { topUpLists, topNewLists, topOriginLists} = useSelector( state => ({
    topUpLists: state.getIn(["recommend", "topUpLists"]),
    topNewLists: state.getIn(["recommend", "topNewLists"]),
    topOriginLists: state.getIn(["recommend", "topOriginLists"]),
  }), shallowEqual)

  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(getTopListAction(0));
    dispatch(getTopListAction(2));
    dispatch(getTopListAction(3));
  }, [dispatch])

  return (
    <RankingWrapper>
      <HYThemeHeaderRCM title="榜单" />
      <div className="top">
        <HYTopRanking info={topUpLists} />
        <HYTopRanking info={topNewLists} />
        <HYTopRanking info={topOriginLists} />
      </div>
    </RankingWrapper>
  )
})
